<template>
	<div class="index">
		<van-search @click="handel" shape="round" :background="mColor" placeholder="搜索" />
		<van-tabs v-model="active">
			<van-tab v-for="item,index in list" :title="item.name">

			</van-tab>
		</van-tabs>
		<div class="solid"></div>
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getArticleList">
			<div class="layout" v-for="item,index in artlist" :key="index" :list="artlist"
				@click="$router.push('/detail?id='+item._id)">
				<div v-if="item.imageSrc.length===1">
					<div class="title-box">
						<p>{{item.title}}</p>
						<p v-for="img in item.imageSrc"><img :src="img" v-lazy="img"></p>
					</div>
					<van-row>
						<van-col span="8">作者: {{item.author}}</van-col>
						<van-col span="8">评论: {{item.comment}}</van-col>
						<van-col span="8">发布日期: {{item.time}}</van-col>
					</van-row>
				</div>
				<div v-else>
					<div class="title-box01">
						<p>{{item.title}}</p>
						<p v-for="img in item.imageSrc"><img :src="img|imgFilter" v-lazy="img"></p>
					</div>
					<van-row>
						<van-col span="8">作者: {{item.author}}</van-col>
						<van-col span="8">评论: {{item.comment}}</van-col>
						<van-col span="8">发布日期: {{item.timeStr}}</van-col>
					</van-row>
				</div>
			</div>

		</van-list>
	</div>
</template>

<script>
	import {
		getCateList,
		getArticleList,
	} from '@/api/home.js'
	import config from '@/config'
	import {
		timeForm
	} from "@/utils/timeform.js";
	export default {
		name: 'HomeView',
		data() {
			return {
				active: 0,
				list: [],
				artlist: [],
				now: new Date().getTime(),
				loading: false, //上拉加载组件 加载中的状态
				finished: false,
				limit: 10,
				skip: 0,
				newData:[]
			}
		},
		filters: {
			imgFilter(img) {
				if (img.includes(config.baseImgUrl) || img.includes(config.baseImgUrls)) {
					return img + '?imageMogr2/thumbnail/!50p'
				} else {
					return img
				}
			}
		},
		computed: {
			// list(){
			// 	return this.$store.state.cate.list
			// },
			cate_id() {
				return this.list[this.active] && this.list[this.active]._id
			}
		},
		watch: {
			cate_id() {
				this.getArticleList()
				this.artlist = [];
				this.finished = false;
				this.newData = []
			}
		},
		methods: {
			handel() {
				this.$router.replace('/search')
			},
			// 获取分类
			getCateList() {
				getCateList().then((
					res) => {
					this.list = res.data
					console.log(res)
				}).catch(err => {
					console.log(err)
				});
			},
			// 获取文章
			getArticleList() {
				let {
					cate_id,
					now,
					limit
				} = this
				getArticleList({
					cate_id,
					skip: this.artlist.length,
					limit,
				}).then(({
					data,
					code,
					count
				}) => {
					if (code == 0) {

						let new_data = data.map((v) => {
							 v.timeStr = timeForm(v.time, false, now);
							return v;
						});
						this.newData = new_data

						this.artlist.push(...new_data)

						//   判断一下 数据加载完毕没  如果加载完毕 把finished设为true  
						// 否则把loading改成false
						if (this.artlist.length >= count) {
							this.finished = true;
						} else {
							this.loading = false
						}
					}
					// if (code == 0) {
					// 	let new_data = data.map((v) => {
					// 		return v
					// 	});
					// 	this.artlist.push(...new_data)
					// 	if (this.artlist.length >= count) {
					// 		this.finished = true;
					// 	} else {
					// 		this.loading = false
					// 	}
					// 	console.log(data)
					// }
				}).catch(err => {
					console.log(err)
				});
			}
		},
		created() {
			this.getCateList()
		},
		mounted() {

		},
	}
</script>
<style lang="scss" scoped>
	.index {
		width: 100vw;
		height: 100vh;
	}

	.van-row {
		width: 91vw;
		margin-bottom: 10px;
	}

	.van-col {
		// width: 50px;
		word-break: keep-all;
		/* 不换行 */
		white-space: nowrap;
		/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
		overflow: hidden;
		/* 内容超出宽度时隐藏超出部分的内容 */
		text-overflow: ellipsis;
		/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
	}

	.van-search .van-cell {
		padding-left: 90px;
	}

	.van-search {
		height: 40px;
		padding: 0 50px;
	}

	.van-search__content {
		background-color: #ffdce2;
	}

	.van-search .van-cell {
		height: 30px;
	}

	.solid {
		border-top: 1px solid #000;
	}

	.van-col {
		font-size: 9px;
		color: #ccc;
	}

	.layout {
		margin: 0 auto;
		margin-top: 10px;
		width: 345px;
		border-bottom: 1px solid #ccc;
	}

	.layout .title-box {
		display: flex;
		justify-content: space-between;
		padding-bottom: 5px;
	}

	.layout .title-box p img {
		width: 113px;
		height: 70px;
	}

	.title-box01 p img {
		width: 113px;
		height: 70px;
		float: left;
		padding: 0 1.01px;
		margin-bottom: 10px;
	}

	.title-box p:first-child {

		width: 190px;
		word-break: keep-all;
		/* 不换行 */
		white-space: nowrap;
		/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
		overflow: hidden;
		/* 内容超出宽度时隐藏超出部分的内容 */
		text-overflow: ellipsis;
		/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
	}

	.title-box01 p:first-child {
		margin: 10px 0;
	}
</style>
